<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!-- ie8开启标准渲染模式 -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
	<link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap.css">
	<link rel="stylesheet" href="../css/common.css">
	<link rel="stylesheet" href="../css/admin.css">
	<title>bootstrap-后台管理</title>
</head>
<body>
<!-- 固定导航 -->
<nav class="navbar navbar-default mz-navbar">
	<div class="container">
		<!-- 这个navbar-header是给内部两个元素包了一层通栏盒子，自身是清除浮动的作用,控制的是导航垂直布局 -->
		<div class="navbar-header">
			<!-- 右边按钮 -->
			<!-- navbar-toggle控制按钮只在移动端显示。data-toggle是js功能标志，js会找到这个元素注册点击事件 -->
			<button type="button" class="navbar-toggle" data-toggle='collapse' data-target='.navbar-collapse'>
				<div class="icon-bar"></div>
				<div class="icon-bar"></div>
				<div class="icon-bar"></div>
			</button>
			<!-- 左边logo -->
			<a class="navbar-brand " href="./">Maizi Admin</a>
		</div>
		<!-- 需要折叠的内容,collaspe表示折叠默认隐藏，配合navbar-collapse宽频默认显示、移动端隐藏 -->
		<div class="navbar-collapse collapse">
			<!-- navbar-nav控制移动端时li为block,nav控制li为float -->
			<!-- nav类本质是让ul下的li左浮动水平排列，并设置ul和li的样式,也就是基本的导航样式 -->
			<ul class="nav navbar-nav">
        <li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;后台首页</a></li>
        <li><a href="user_list.html"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;用户管理</a></li>
        <li><a href="content.html"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;内容管理</a></li>
        <li><a href="tag.html"><span class="glyphicon glyphicon-tag"></span>&nbsp;&nbsp;标签管理</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
        	<a class="dropdown-toggle" type="button" href="javascript:void(0);" data-toggle="dropdown" >
				    admin
				    <span class="caret"></span>
				  </a>
        	<ul class="dropdown-menu">
			      <li><a href="../"><span class="glyphicon glyphicon-screenshot"></span>&nbsp;前台首页</a></li>
			      <li><a href="../"><span class="glyphicon glyphicon-user"></span>&nbsp;用户主页</a></li>
			      <li><a href="../"><span class="glyphicon glyphicon-cog"></span>&nbsp;个人设置</a></li>
			      <li><a href="../"><span class="glyphicon glyphicon-credit-card"></span>&nbsp;账户中心</a></li>
			      <li><a href="../"><span class="glyphicon glyphicon-heart"></span>&nbsp;我的收藏</a></li>
			    </ul>
      	</li>
        <li><a href="javascript:void(0);"><span class="glyphicon glyphicon-off"></span>&nbsp;&nbsp;退出</a></li>
      </ul>
		</div>
	</div>
</nav>
<!-- 内容模块 -->
<div class="container">
	<div class="row">
		<div class="col-md-12">
			<!-- 警告框 -->
			<div class="alert alert-danger alert-dismissible fade in" >
				<!-- data-dismiss="alert" 的原理大概是删除父元素 alert节点-->
	      <button type="button" class="close" data-dismiss="alert" ><span aria-hidden="true">×</span></button>
	      <h4>网站程序有漏洞，急需修复！</h4>
	      <p>当前版本程序(V1.22)存在严重安全问题，容易造成攻击，请即可修复！</p>
	      <p>
	        <button type="button" class="btn btn-danger">立即修复</button>
	        <button type="button" class="btn btn-default" data-dismiss="alert">稍后处理</button>
	      </p>
	    </div>
			<!-- 警告框 -->
		</div>
		<!-- 数据统计 -->
	    <div class="col-md-6">
	    	<div class="panel panel-default">
				  <div class="panel-heading">网站数据统计</div>
				  <div class="panel-body">
				    <table class="table">
				    	<thead>
				    		<tr>
				    			<th>统计项目</th>
				    			<th>今日</th>
				    			<th>昨日</th>
				    		</tr>
				    	</thead>
				    	<tbody>
				    		<tr>
				    			<th>注册会员</th>
				    			<td>200</td>
				    			<td>400</td>
				    		</tr>
				    		<tr>
				    			<th>会员登录</th>
				    			<td>1423</td>
				    			<td>5423</td>
				    		</tr>
				    		<tr>
				    			<th>今日发帖</th>
				    			<td>12125</td>
				    			<td>2125</td>
				    		</tr>
				    		<tr>
				    			<th>转载次数</th>
				    			<td>455</td>
				    			<td>2222</td>
				    		</tr>
				    	</tbody>
				    </table>
				  </div>
				</div>
	    </div>
	    <div class="col-md-6 hotArticle">
	    	<div class="panel panel-default">
				  <div class="panel-heading">网站热帖</div>
				    <ul class="list-group">
						  <li class="list-group-item"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;泛Mooc职业教育， 效果和就业为王<small class="pull-right">2015-08-08</small></li>
						  <li class="list-group-item"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;泛Mooc职业教育， 效果和就业为王<small class="pull-right">2015-08-08</small></li>
						  <li class="list-group-item"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;泛Mooc职业教育， 效果和就业为王<small class="pull-right">2015-08-08</small></li>
						  <li class="list-group-item"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;泛Mooc职业教育， 效果和就业为王<small class="pull-right">2015-08-08</small></li>
						  <li class="list-group-item"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;泛Mooc职业教育， 效果和就业为王<small class="pull-right">2015-08-08</small></li>
						  <li class="list-group-item"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;泛Mooc职业教育， 效果和就业为王<small class="pull-right">2015-08-08</small></li>
						</ul>
				</div>
	    </div>
	  <!-- 数据统计 -->
	  <!-- 数据图表 -->
	    <div class="col-md-6">
	    	<div class="panel panel-default">
				  <div class="panel-heading">今日访客统计</div>
				  <div class="panel-body">
				    <canvas id="myChart" class="col-md-12"></canvas>
				  </div>
				</div>
	    </div>
	    <div class="col-md-6 webChart">
	    	<div class="panel panel-default">
				  <div class="panel-heading">服务器状态</div>
				  <div class="panel-body">
				  	<p>内存使用率：40%</p>
				  	<div class="progress">
						  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
						  </div>
						</div>
						<p>数据库使用率：20%</p>
						<div class="progress">
						  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
						  </div>
						</div>
						<p>磁盘使用率：60%</p>
						<div class="progress">
						  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
						  </div>
						</div>
						<p>CPU使用率：40%</p>
						<div class="progress">
						  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
						  </div>
						</div>
				  </div>
				</div>
	    </div>
	  <!-- 数据图表 -->
	  <!-- 留言本 -->
	  <div class="col-md-12 message">
    	<div class="panel panel-default">
			  <div class="panel-heading">团队留言板</div>
			  <div class="panel-body">
			  	<div class="col-md-7">
			  		<div class="media well">
						  <div class="media-left">
						    <a href="#">
						      <img class="media-object wh64" src="../images/a.png" alt="...">
						    </a>
						  </div>
						  <div class="media-body">
						    <h4 class="media-heading">卓大哥</h4>
						    技术大哥，今晚请把网站程序升级一下哈，现在的系统有漏洞，安全起见！
						  </div>
						</div>
						<div class="media well">
							<div class="media-body">
						    <h4 class="media-heading">技术大哥</h4>
						    收到，今晚凌晨2点准时升级！
						  </div>
						  <div class="media-right">
						    <a href="#">
						      <img class="media-object wh64" src="../images/i.png" alt="...">
						    </a>
						  </div>
						</div>
						<div class="media well">
							<div class="media-body">
						    <h4 class="media-heading">技术大哥</h4>
						    你先在站点发布一下通知哈！	
						  </div>
						  <div class="media-right">
						    <a href="#">
						      <img class="media-object wh64" src="../images/i.png" alt="...">
						    </a>
						  </div>
						</div>
						<div class="media well">
						  <div class="media-left">
						    <a href="#">
						      <img class="media-object wh64" src="../images/a.png" alt="...">
						    </a>
						  </div>
						  <div class="media-body">
						    <h4 class="media-heading">卓大哥</h4>
						    好嘞。
						  </div>
						</div>
			  	</div>
			  	<div class="col-md-5">
			  		<form action="#">
			  			<div class="form-group">
			  				<label for="msg">输入留言内容</label>
			  				<textarea  id="msg" rows="5" class="form-control" placeholder="请输入留言内容"></textarea>
			  			</div>
			  			<button type="submit" class="btn btn-default">留言</button>
			  		</form>
			  		<div class="panel panel-default">
						  <div class="panel-heading">团队联系手册</div>
						  <div class="panel-body">
						    <ul class="list-group">
						    	<li class="list-group-item">站长(李小龙)：<span class="glyphicon glyphicon-phone"></span>&nbsp;13134848615</li>
						    	<li class="list-group-item">技术(大牛哥)：<span class="glyphicon glyphicon-phone"></span>&nbsp;13456127694</li>
						    	<li class="list-group-item">推广(张二哥)：<span class="glyphicon glyphicon-phone"></span>&nbsp;13457815482</li>
						    	<li class="list-group-item">客服(王女士)：<span class="glyphicon glyphicon-phone"></span>&nbsp;13134567782&nbsp;<span class="glyphicon glyphicon-phone-alt"></span>&nbsp;028-888888</li>
						    	
						    </ul>
						  </div>
						</div>
			  	</div>
			  </div>
			</div>
    </div>
  	<!-- 留言本 -->
	</div>
</div>
<!-- 内容模块 -->
<!-- footer -->
<footer>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<p class="text-center">
            Copyright&nbsp;&copy;&nbsp;2012-2015&nbsp;&nbsp;www.maiziedu.com&nbsp;&nbsp;蜀ICP备13014270号-4
        </p>
			</div>
		</div>
	</div>
</footer>
<!-- footer -->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="../lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="../lib/chart/Chart.js"></script>
<script src="../lib/chart/script.js"></script>
</body>
</html>